<template>
  <el-form :model="account"  :rules="rules" ref="form" label-width="60px" >
    <el-form-item label="卡号" prop="cardno">
      <el-input type="text" v-model="account.cardno" ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="account.password" ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    export default {
      name: "Login",
      data(){
        let checkCardLength=(rule,value,callback)=>{
          let check=/^\d{18}$/
          if(!check.test(value)){
            callback(new Error("卡号需要为18位数字！！!"))
          }else{
            callback()
          }
        }
        let checkPasswordLength=(rule,value,callback)=>{
          let check=/^\d{6}$/
          if(!check.test(value)){
            callback(new Error("密码需要为六位数字！！！"))
          }else{
            callback()
          }
        }
        return{
          rules:{
            cardno:[
              {required:true ,message:"卡号不能为空！",trigger:"blur"},
              {validator:checkCardLength,trigger:"blur"}
              ],
            password:[
              {required:true,message:"密码不能为空!",trigger:"blur"},
              {validator:checkPasswordLength,trigger:"blur"}
              ]
          },
          account:{}
        }
      },
      methods:{
        submitForm(){
          this.$refs["form"].validate((val)=>{
            if(val){
              this.axios({
                url:"/account",
                method:"get",
                params:{
                  cardno:this.account.cardno,
                  password:this.account.password
                }
              }).then((res)=>{
                if(res.data==""){
                  alert("用户名或密码错误！！！")
                }else if(res.data.status==0){
                  alert("账号已被冻结！！！")
                }else{
                  this.$router.push({path:'/home',query:{cardno:this.account.cardno}})
                }
              })
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
